<template>
  <view>
    <!-- 轮播图区域 -->
    <view>
      <swiper :indicator-dots="true" :autoplay="true" :duration="1000" :circular="true">
        <!-- 循环渲染轮播图的 item 项 -->
        <swiper-item v-for="(item,i) in swiperList" :key="i">
          <!-- <navigator class="swiper-item" :url="'/subpkg/goods_detail/goods_detail?goods_id=' + item.goods_id"> -->
          <!-- 动态绑定图片的 src 属性 -->
          <image :src="item.imageSrc"></image>
          <!-- </navigator> -->
        </swiper-item>
      </swiper>
    </view> <!-- 轮播图 -->
    <!-- 宫格导航 -->
    <view v-if="userType==='业主'">
      <u-grid :border="false" col="4">
        <u-grid-item v-for="(listItem,listIndex) in gridlist" :key="listIndex" @click="click(listItem.title)">
          <u-icon :customStyle="{paddingTop:20+'rpx'}" :name="listItem.src" :size="30"></u-icon>
          <text class="grid-text" style="margin-top: 10rpx;font-size: 32rpx;color: #616161;">{{listItem.title}}</text>
        </u-grid-item>
      </u-grid>
        <u-popup :show="showContactUs" :overlay="true" :closeOnClickOverlay="true"  :round="10"
          mode="center" @close="close" @open="open">
          <button type="primary"  open-type="contact" bindcontact="handleContact" session-from="sessionFrom">点击进入客服</button>
        </u-popup>
    </view>
    <!-- 小区公告 -->
    <view class="gonggao-box">
      <!-- title -->
      <view class="gonggao-title">
        <view class="gonggao-title-flag"></view>
        <view class="gonggao-title-text">小区公告</view>
      </view>
      <!-- 公告列表 -->
      <view>
        <my-notice :notice="item" v-for="(item,index) in noticeList" :key="index"></my-notice>
      </view><!-- 公告列表end -->
      <view style="margin-bottom: 150rpx;"></view>

    </view>
    <!-- 自定义tabBar -->
    <view>
      <u-tabbar :value="tabBarIndex" :fixed="true" @change="tabBarchange" :placeholder="false" activeColor="#1296db"
        :safeAreaInsetBottom="false">
        <block v-for="(item,index) in tabBarList" :key="index">
          <u-tabbar-item :text="item.text">
            <image class="u-page__item__slot-icon" slot="inactive-icon" :src="item.iconPath"></image>
            <image class="u-page__item__slot-icon" slot="active-icon" :src="item.selectedIconPath"></image>
          </u-tabbar-item>
        </block>
      </u-tabbar>
    </view>

  </view>
</template>

<script>
  // 按需导入 mapState ,mapMutations,mapGetters 辅助函数
  import {
    mapState,
    mapMutations,
    mapGetters
  } from 'vuex'
  export default {
    data() {
      return {
        // tabBarName: 0,//tabBar下标
        // tabBarList: [],//tabBar数组
        // 1. 轮播图的数据列表，默认为空数组
        swiperList: [{
          imageSrc: "https://www.helloimg.com/images/2022/04/12/RtKRCg.jpg"
        }, ],
        gridlist: [{
            src: 'https://www.helloimg.com/images/2022/03/25/RXtT89.png',
            title: '捐赠旧衣'
          },
          {
            src: 'https://www.helloimg.com/images/2022/03/24/R3iasC.png',
            title: '垃圾分类'
          },
          {
            src: 'https://www.helloimg.com/images/2022/03/24/R3ixKE.png',
            title: '积分详情'
          },
          {
            src: 'https://www.helloimg.com/images/2022/03/24/R3iAsM.png',
            title: '联系我们'
          },
        ],
        noticeList: [],
        // 是否正在请求数据    节流阀（防止短时间内重复请求）
        isloading: false,
        showContactUs:false,

      };
    },
    computed: {
      // 将 m_user 模块中的 userType 数据映射到当前页面中使用
      ...mapState('m_user', ['userType', 'userInfo']),
      ...mapState('m_tabbar', ['tabBarList', 'tabBarIndex']),
    },
    onLoad() {
      // this.getSwiperList();
      // 获取公告列表
      this.getNoticeList();
    },
    methods: {
      // 3. 获取轮播图数据的方法
      async getSwiperList(cb) {
        // ** 打开节流阀
        this.isloading = true
        // 3.1 发起请求
        const {
          data: res
        } = await uni.$http.get('/swiper/findSwiper')
        // ** 关闭节流阀
        this.isloading = false
        // 只要数据请求完毕，就立即按需调用 cb 回调函数,cb() 是关闭下拉刷新的
        cb && cb()
        console.log(res)
        // 3.2 请求失败
        if (res.status !== 200) return uni.$showMsg()
        // 3.3 请求成功，为 data 中的数据赋值
        console.log(res);
        this.swiperList = res.data
      },
      // 获取社区公告数据 的方法
      async getNoticeList(cb) {
        // ** 打开节流阀
        this.isloading = true
        const {
          data: res
        } = await uni.$http.get('/notice/getnotice')
        // ** 关闭节流阀
        this.isloading = false
        // 只要数据请求完毕，就立即按需调用 cb 回调函数,cb() 是关闭下拉刷新的
        cb && cb()
        console.log(res)
        // 请求失败  弹框提醒
        if (res.status !== 200) return uni.$showMsg()
        // 请求成功  为noticeList  赋值
        // 图片url处理
        var tempDataList = res.data;
        for (var i = 0; i < tempDataList.length; i++) { //循环遍历tempRefuseclassList，对每个tempRefuseclass进行操作
          if (tempDataList[i].img != null) {
            var imgArr = tempDataList[i].img.split(";"); //将数据库中的url字符串用；分割为数组
            tempDataList[i].img = []; //重新初始化为数组
            for (var j = 0; j < imgArr.length - 1; j++) { //j<imgArr.length-1  是为了除去最后一个空元素
              tempDataList[i].img[j] = imgArr[j];
            }
          }
        }
        this.noticeList = tempDataList;
      },
      // 下拉刷新的事件
      onPullDownRefresh() {
        // 1. 重置关键数据
        this.isloading = false
        this.noticeList = [];
        this.swiperList = [];
        // 2. 重新发起请求   传参（关闭下拉刷新，因为默认不关闭）
        this.getNoticeList(() => uni.stopPullDownRefresh())
        this.getSwiperList(() => uni.stopPullDownRefresh())
      },
      // 九宫格单击按钮
      click(name) {
        if (name === '捐赠旧衣') {
          uni.navigateTo({
            url: '/subpkg/juanzengjiuyi/juanzengjiuyi'
          })
          return;
        }
        if (name === '垃圾分类') {
          uni.navigateTo({
            url: '/subpkg/refuse-classification/refuse-classification'
          })
          return;
        }
        if (name === '积分详情') {
          uni.navigateTo({
            url: '/subpkg/jifen-detail/jifen-detail'
          })
          return;
        }
        if(name==='联系我们'){
          this.showContactUs=true;
        }
      },
      //联系我们处理事件 
      handleContact(e) {
        console.log(e.detail.path)
        console.log(e.detail.query)
      },
      // 联系我们   打开事件
      open() {
        // console.log('open');
      },
      // 联系我们   关闭事件
      close() {
        this.showContactUs = false;
      },
      ...mapMutations('m_tabbar', ['updateTabBarList', 'updateTabBarIndex']),
      tabBarchange(name) {
        uni.switchTab({
          url: this.tabBarList[name].pagePath
        })
        // this.tabBarIndex = name;
        this.setTabBarIndex(name);
      },
      setTabBarIndex(index) {
        this.updateTabBarIndex(index);
      }
    }
  }
</script>

<style lang="scss">
  swiper {
    height: 330rpx;
    margin-left: 30rpx;

    .swiper-item,
    image {
      width: 98%;
      height: 100%;
      border-radius: 15rpx;
    }
  }

  .u-page {
    padding: 0;

    &__item {

      &__title {
        color: $u-tips-color;
        background-color: $u-bg-color;
        padding: 30rpx;
        font-size: 30rpx;

        &__slot-title {
          color: $u-primary;
          font-size: 30rpx;
        }
      }

      &__slot-icon {
        width: 70rpx;
        height: 70rpx;
      }
    }
  }

  .gonggao-box {
    margin-left: 0rpx;
    margin-top: 30rpx;
    width: 750rpx;
  }

  .gonggao-title {
    border-radius: 15rpx;
    background-color: #f2f1ec;
  }

  .gonggao-title-flag {
    margin-left: 30rpx;
    margin-top: 5rpx;
    float: left;
    width: 15rpx;
    height: 50rpx;
    background-color: #1296db;
  }

  .gonggao-title-text {
    padding-top: 5rpx;
    margin-left: 60rpx;
    font-weight: bold;
    font-size: 42rpx;
    width: 670rpx;
    height: 60rpx;
  }
</style>
